<template>
    <div>
        {{abc}}
        <button @click="$emit('getChange',msg)">触发更新</button>
        <h1>{{num}}</h1>
        <br><br>
        <!-- 轮播 -->
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4" :key="item">
                <h3>{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    props:['abc'],
    data(){
        return {
            num:1,
            //定时器对象
            myTime:null,
            msg:'我要被更新了，updated生命周期才会执行'
        }
    },
    //创建阶段
    beforeCreate(){
        console.log('1.创建前')
    },
    created(){
        console.log('2.创建后')
    },
    //挂载阶段
    beforeMount(){
        //骨架屏--技术
        console.log('3.挂载前')
    },
    //当页面加载完成，发起一个请求，写这里
    mounted(){
        //挂载成功相当于window.onload
        //请求--单次请求--轮询请求
        this.myTime = setInterval(()=>{
            this.num++;
            console.log('成功')
        },1000)
        console.log('4.挂载成功')
    },
    //更新阶段：当data或props数据修改时触发
    beforeUpdate(){
        console.log('更新前')
    },
    updated(){
        console.log('更新后')
    },
    //卸载-销毁
    beforeDestroy(){
        console.log('卸载前');
        window.clearInterval(this.myTime);
    },
    destroyed(){
        console.log('卸载完成')
    }
}
</script>
<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>